<template>
  <div class="container">
    <el-card>
      <!-- 新增试题按钮 -->
      <el-row type="flex" justify="space-between" style="margin-bottom: 12px">
        <!-- 注释说明 -->
        <span style="font-size: 12px; color: pink"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <!-- 跳转按钮 -->
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </el-row>
      <!-- 搜索表单 -->
      <el-form :label-position="labelPosition" label-width="80px">
        <!-- 第一行 -->
        <el-row type="flex" justify="space-between">
          <el-form-item label="学科">
            <el-select
              v-model="form.subjecVal"
              filterable
              style="width: 180px"
              @change="changeOptionFn"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select
              v-model="form.SecondaryDirectoryVal"
              style="width: 180px"
            >
              <el-option
                v-for="(item, index) in SecondaryDirectoryList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="form.tags" style="width: 180px">
              <el-option
                v-for="(item, index) in tagsList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model.trim="form.keyword"
              placeholder="根据题干搜索"
              style="width: 180px"
            ></el-input>
          </el-form-item>
        </el-row>
        <!-- 第二行 -->
        <el-row type="flex" justify="space-between">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" style="width: 180px">
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" style="width: 180px">
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="form.direction" style="width: 180px">
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="form.entryPersonVal" style="width: 180px">
              <el-option
                v-for="(item, index) in entryPersonList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 第三行 -->
        <el-row type="flex" justify="space-between">
          <el-form-item label="题目备注">
            <el-input
              v-model.trim="form.remarks"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input
              v-model.trim="form.shortName"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-row type="flex" justify="space-between" style="width: 180px">
              <el-select v-model.trim="form.province" @change="changeFn">
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select v-model="form.city">
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-row>
          </el-form-item>
          <!-- 取消和搜索按钮 -->
          <el-row type="flex" justify="end" style="width: 260px; height: 32px">
            <el-button size="small" @click="clearOptionsFn">清除</el-button>
            <el-button type="primary" size="small" @click="searchOptionsFn"
              >搜索</el-button
            >
          </el-row>
        </el-row>
      </el-form>
      <!-- 提示信息 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格内容 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="80"
        ></el-table-column>
        <el-table-column
          width="80"
          label="目录"
          prop="catalog"
        ></el-table-column>
        <el-table-column
          width="80"
          label="题型"
          prop="questionType"
          :formatter="questionType"
        ></el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <!-- 使用插槽的方式解析html -->
          <template v-slot="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <!-- 使用插槽格式化时间 -->
          <template v-slot="{ row }">
            <div>{{ row.addDate | parseTimeByString }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="难度"
          prop="difficulty"
          :formatter="difficulty"
        ></el-table-column>
        <el-table-column
          width="80"
          label="录入人"
          prop="creator"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <!-- 使用插槽 -->
          <template v-slot="{ row }">
            <el-button
              title="预览"
              size="small"
              type="primary"
              plain
              circle
              @click="previewShownFn(row)"
            >
              <svg-icon icon-class="eye-open" />
            </el-button>
            <el-button
              title="修改"
              size="small"
              type="success"
              icon="el-icon-edit"
              plain
              circle
              @click="$router.push(`/questions/new`)"
            ></el-button>
            <el-button
              title="删除"
              size="small"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="deltableData(row)"
            ></el-button>
            <el-button
              title="加入精选"
              size="small"
              type="warning"
              icon="el-icon-check"
              plain
              circle
              @click="addTabData(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 15px; height: 28px">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="5"
          :total="total"
          @current-change="currentPage"
          @size-change="SizeChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 使用预览组件 -->
    <QuestionsPreview ref="preview" :previewShown.sync="previewShown" />
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { list as listDirectory } from '@/api/hmmm/directorys.js'
import { list as listTags } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
// 定义去取重复的录入人的方法
const removeentryPersonList = (arr) => {
  const obj = {}
  arr = arr.reduce((newArr, next) => {
    // eslint-disable-next-line no-unused-expressions
    obj[next.username] ? '' : (obj[next.username] = true && newArr.push(next))
    return newArr
  }, [])
  return arr
}
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: { QuestionsPreview },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      labelPosition: 'right', // 对齐方式
      tableData: [], // 存储表格数据
      tlist: {
        page: 1, // 当前页码
        pagesize: 5 // 每页的数据条数
      },
      total: null, // 总条数
      previewShown: false, // 控制删除按钮弹出层显示
      options: [], // 存储学科下拉框内容
      SecondaryDirectoryList: [], // 存储二级目录的内容
      tagsList: [], // 存储标签数据
      questionTypeList: questionType, // 将试题类型映射到这个变量
      difficultyList: difficulty, // 将难度映射到这个变量
      directionList: direction, // 蒋方向映射到这个变量
      entryPersonList: [], // 存储录入人的内容
      provinceList: provinces(), // 城市
      cityList: [], // 地区
      form: {
        subjecVal: '', // 学科option选中的内容
        subjectID: '', // 存储学科id
        SecondaryDirectoryVal: '', // 二级目录选中的内容
        tags: '', // 当前选中的标签内容
        keyword: '', // 存储关键字
        questionType: '', // 试题类型选中的内容
        difficulty: '', // 难度选中的内容
        direction: '', // 方向选中的内容
        entryPersonVal: '', // 录入人选中的内容
        remarks: '', // 题目备注
        shortName: '', // 企业名称
        province: '', // 选中的城市
        city: '' // 选中的地区
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 以下两个是生命周期钩子
  created() {
    // 调用获取基础题库列表的方法
    this.list()
    // 调用获取学科列表的方法
    this.simple()
  },
  mounted() {},
  // 组件方法
  methods: {
    // 封装学科列表的方法
    async simple() {
      try {
        // 发起请求
        const { data } = await simple()
        // console.log(data, 'data')
        // 更新options的数据
        this.options = data
        // 更新
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科选中的值
    async changeOptionFn(value) {
      // 更新学科id
      this.form.subjectID = value
      // 发起获取二级目录的请求
      const {
        data: { items }
      } = await listDirectory({ subjectID: value })
      // 发起获取标签的请求
      const { data } = await listTags({ subjectID: value })
      // 获取二级目录的数据，更新二级目录的内容
      this.SecondaryDirectoryList = items.map((item) => item.directoryName)
      // 将重复的录入人信息去除，并将处理之后的数据更新给录入人
      this.entryPersonList = removeentryPersonList(items).map(
        (item) => item.username
      )
      // 获取二级标签数据
      this.tagsList = data.items.map((item) => item.tagName)
    },
    // 选择城市的方法
    changeFn() {
      // 获取地区赋值给本地
      this.cityList = citys(this.form.province)
    },
    // 清除表单
    clearOptionsFn() {
      // 将学科选中的数据置为空
      this.form = {}
    },
    // 点击搜索按钮
    async searchOptionsFn() {
      // 重新获取基础题库列表的数据
      const {
        data: { items, counts }
      } = await list({ ...this.tlist, ...this.form })
      // 更新存储表格数据和总条数
      this.tableData = items
      this.total = counts
    },
    // 封装获取基础题库列表的方法
    async list() {
      const {
        data: { items, counts }
      } = await list(this.tlist)
      // 更新存储表格数据和总条数
      this.tableData = items
      this.total = counts
    },
    // 格式化题型内容
    questionType(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // 定义一个新的变量，承载查询出来的数据
      // 这里的cellValue是字符串类型，要转成数字型
      const qtType = questionType.find((item) => item.value === +cellValue)
      // 将数据返回出去
      return qtType ? qtType.label : '未知'
    },
    // 格式化难度内容
    difficulty(row, column, cellValue, index) {
      // 定义一个新的变量，承载查询出来的数据
      const dfCulty = difficulty.find((item) => item.value === +cellValue)
      // 将数据返回
      return dfCulty ? dfCulty.label : '未知'
    },
    // 改变页码加载新的数据
    currentPage(newPage) {
      // 更新新的页码
      this.tlist.page = newPage
      // 重新调用获取基础题库列表的方法
      this.list()
    },
    // 改变每页显示的数据条数
    SizeChange(val) {
      console.log(val)
      // 更新每页显示条数
      this.tlist.pagesize = val
      // 重新调用获取基础题库列表的方法
      this.list()
    },
    // 点击删除按钮
    deltableData(data) {
      this.$confirm('此操作将永久删除题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发起删除的请求
          await remove(data)
          // 解决当页面只有一条数据时，删除之后页面内容为空的BUG
          if (this.tableData.length === 1) {
            this.tlist.page = this.tlist.page > 1 ? this.tlist.page - 1 : 1
          }
          // 提示信息
          this.$message.success('删除成功')
          // 重新获取数据渲染页面
          this.list()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 点击预览按钮
    previewShownFn(data) {
      // 打开弹出层
      this.previewShown = true
      // 将data传入到子组件中
      this.$refs.preview.detail(data)
      // console.log(data, 'data')
    },
    // 点击加入精选
    addTabData(data) {
      this.$confirm('此操作将改题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          // 发起请求
          await choiceAdd({ ...data, choiceState: 1 })
          // 提示信息
          this.$message.success('添加成功')
          // 重新获取基础题库列表
          this.list()
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin-left: 10px;
  ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  ::v-deep .el-pagination__jump {
    margin-left: 0;
    .el-input--medium .el-input__inner {
      height: 28px;
    }
  }
}
</style>
